<template>
    <div class="main-comment row">
        <img class="movie-img"
            :src="info.movieImg"
            alt>
        <div class="text">
            <div class="row text-top">
                <img :src="info.userImg"
                    alt
                    @click.stop="toPage">
                <p>{{info.userName}}</p>
                <el-rate v-model="info.imgNumber"
                    disabled
                    show-score
                    text-color="#ff9900"
                    score-template="{value}"></el-rate>
                <span>{{date}}</span>
            </div>
            <h2>
                <a href="javascript:void(0);"
                    @click.stop="toCommentDetails">{{info.title}}</a>
            </h2>
            <div class="content-text">{{info.content}}</div>
            <div class="row btn-list">
                <a>
                    <i class="el-icon-caret-top"
                        title="有用"></i>102
                </a>
                <a>
                    <i class="el-icon-caret-bottom"
                        title="没用"></i>11
                </a>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: "main-comment",
    data() {
        return {
            value: 3.5,
            date: new Date()
        }
    },
    props: {
        info: {
            type: Object,
            required: true
        }
    },
    methods: {
        toPage() {
            this.$router.push({ path: "/film_details" })
        },
        toCommentDetails() {
            this.$router.push({ path: "/comment_details" })
        }
    }
}
</script>
<style lang="less" scoped>
    .main-comment {
        align-items: flex-start;
        box-sizing: border-box;
        border-top: 1px solid #dddddd;
        padding-top: 18px;
        padding-bottom: 18px;
        min-height: 200px;
        .movie-img {
            height: 105px;
        }
        .text {
            box-sizing: border-box;
            margin-left: 20px;
            .text-top {
                img {
                    height: 20px;
                }
                p {
                    font-size: 13px;
                    margin-left: 10px;
                    color: #37a;
                    &:hover {
                        color: #fff;
                        background-color: #27a;
                    }
                }
                span {
                    font-size: 13px;
                    margin-left: 10px;
                    color: #999;
                }
            }
        }
        h2 {
            margin-top: 5px;
            margin-bottom: 5px;
            a {
                color: #37a;
                text-decoration: none;
                font-size: 13px;
                &:hover {
                    color: #fff;
                    background-color: #27a;
                }
            }
        }
        .content-text {
            margin-bottom: 15px;
            color: #494949;
            overflow: hidden;
            word-break: break-word;
            cursor: pointer;
            font-size: 13px;
        }
        .btn-list {
            a {
                color: #3377aa;
                padding: 4px 6px;
                margin-right: 4px;
                border-radius: 2px;
                background-color: #f0f7f9;
                display: inline-block;
                line-height: 1;
            }
        }
    }
</style>
